<template>
  <div>
    <ul>
      <li v-for="item in hobbys" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addHobby">添加爱好</button>
    <button @click="coverHobby">覆盖爱好</button>
    <ul>
      <li v-for="item in users" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addUser">添加用户</button>
    <button @click="coverUser">覆盖用户</button>
    <h3>count:{{ count }}</h3>
    <button @click="count++">count++</button>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
let count = ref(1)

let users = reactive([
  { id: 1, name: '李敏' },
  { id: 2, name: '泉峰' },
  { id: 3, name: '起珍' },
])

let hobbys = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '打游戏' },
])

// 添加用户
const addUser = () => {
  let user = { id: Date.now(), name: '李敏' + Date.now() }
  users.push(user)
}

// 覆盖用户
const coverUser = () => {
  users = [{ id: Date.now(), name: "林威" }]
}

// 添加爱好
const addHobby = () => {
  let item = { id: Date.now(), name: '打豆豆' + Date.now() }
  hobbys.value.push(item)
}

//  覆盖爱好
const coverHobby = () => {
  hobbys.value = [{ id: Date.now(), name: '吃水果' }]
}


// 注意：
// 1. 通过ref创建的响应式数据，在逻辑中通过.value去操作他的值，在模板中不需要.value，因为会自动解包
// 2. ref和reactive区别：ref可以被覆盖，reactive不可以被覆盖，响应式数据不会更新
</script>
